/*
 * @Author: “Jackson” “1145239633@qq.com”
 * @Date: 2025-08-06 16:12:57
 * @LastEditors: “Jackson” “1145239633@qq.com”
 * @LastEditTime: 2025-08-08 16:36:02
 * @FilePath: \shaangu-web\src\utils\echartsPie3d.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as echarts from "echarts";
let option;
export const getLine = (data) => {
  let bgColor = "#fff";
  let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69",
  ];
  let echartData = data;

  let xAxisData = echartData.map((v) => v.name);
  let yAxisData1 = echartData.map((v) => v.value);
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  };
  option = {
    backgroundColor: bgColor,
    color: color,
     legend: {
      right: 10,
      // top: 10,
    },
    grid: {
      top: "10%",
      right: "10%",
      bottom: "10%",
      left: "10%",
    },
    // tooltip: {
    //   trigger: "axis",
    //   formatter: function (params) {
    //     let html = "";
    //     params.forEach((v) => {
    //       console.log(v);
    //       html += `<div style="color: #666;font-size: 14px;line-height: 24px">
    //             <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
    //               color[v.componentIndex]
    //             };"></span>
    //             ${v.seriesName}.${v.name}
    //             <span style="color:${
    //               color[v.componentIndex]
    //             };font-weight:700;font-size: 18px">${v.value}</span>
    //             万元`;
    //     });

    //     return html;
    //   },
    //   extraCssText:
    //     "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
    //   axisPointer: {
    //     type: "shadow",
    //     shadowStyle: {
    //       color: "#ffffff",
    //       shadowColor: "rgba(225,225,225,1)",
    //       shadowBlur: 5,
    //     },
    //   },
    // },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#333",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#D9D9D9",
          },
        },
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#666",
          },
        },
        nameTextStyle: {
          color: "#666",
          fontSize: 12,
          lineHeight: 40,
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#E9E9E9",
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData1,
      },
    ],
  };
  return option;
};

export const getLine1 = (xdata, ydata) => {
  var data_val = ydata,
    xAxis_val = xdata;
  var option = {
      legend: {
      right: 10,
      // top: 10,
    },
    grid: {
      top: "10%",
      right: "10%",
      bottom: "10%",
      left: "10%",
    },
    tooltip: {
      show: true,
      backgroundColor: "#384157",
      borderColor: "#384157",
      borderWidth: 1,
      formatter: "{b}:{c}",
      extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 1)",
    },
    xAxis: {
      data: xAxis_val,
      boundaryGap: false,
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#5c6076",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      ayisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#ccc",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
    },

    series: [
      {
        type: "bar",
        // name:'linedemo',

        tooltip: {
          show: false,
        },
        animation: false,
        barWidth: 1.4,
        hoverAnimation: false,
        data: data_val,
        itemStyle: {
          normal: {
            color: "#f17a52",
            opacity: 0.6,
            label: {
              show: false,
            },
          },
        },
      },
      {
        type: "line",
        // name:'linedemo',
        smooth: true,
        symbolSize: 10,
        animation: false,
        lineWidth: 1.2,
        hoverAnimation: false,
        data: data_val,
        symbol: "circle",
        itemStyle: {
          normal: {
            color: "#f17a52",
            shadowBlur: 40,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#f17a52",
              },
            },
          },
        },
        areaStyle: {
          normal: {
            color: "#f17a52",
            opacity: 0.08,
          },
        },
      },
    ],
  };
  return option;
};
